<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下单页面</title>


    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="res/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->


    <link rel="stylesheet" href="../css/place_an_order.css">




</head>
    <body>
<!--    <body id="mainframe">-->

    <!--最上面的导航-->
    <div class="shortcut-2014">
        <div class="w haha">
            <ul class="fr frfr">
                <li class="fore1 fore1zidingyi" id="ttbar-login">
                    <a href="" class="link-login">你好，请登录</a>
                    &nbsp;&nbsp;
                    <a href="" class="link-regist style-red">免费注册</a>
                </li>
                <!--<li class="spacer"></li>-->
                <li class="fore2">
                    <div class="dt">
                        <a href="" target="_blank">我的订单</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>


    <!-- 导航下面 -->
    <div id="o-header-2013">
        <div id="header-2013" style="display:none;"></div>
    </div>


    <!-- 结算页所在的盒子 -->
    <div class="w w1 header clearfix">

        <!-- 左边logo 和 结算页样式 -->
        <div id="logo-2014">
            <a href="" class="logo" target="_blank"></a>
            <a href="" class="link2">
                <b></b>
                结算页
            </a>
        </div>

        <!-- 右边订单进度显示 -->
        <div class="stepflex" id="#sflex03">

            <!-- 我的购物车样式 -->
            <dl class="first done">
                <dt class="s-num">1</dt>
                <dd class="s-text">
                    1.我的购物车
                    <s></s>
                    <b></b>
                </dd>
            </dl>

            <!-- 填写核对订单信息样式 -->
            <dl class="normal doing">
                <dt class="s-num">2</dt>
                <dd class="s-text">
                    2.填写核对订单信息
                    <s></s>
                    <b></b>
                </dd>
            </dl>

            <!-- 成功提交订单样式 -->
            <dl class="normal last">
                <dt class="s-num">3</dt>
                <dd class="s-text">
                    3.成功提交订单
                    <s></s>
                    <b></b>
                </dd>
            </dl>

        </div>

    </div>


    <!-- 收货地址直到提交订单盒子 -->
    <div id="container">
        <div id="content" class="w">
            <div class="orderInfo-tip hide" style="display: none;">
                <span class="wicon"></span>
                <span class="ftx-03">温馨提示：订单中存在不支持7天无理由退货商品，请确认相关商品信息后提交订单。</span>
                <span class="cls-btn" onclick="closeorderInfotip()">x</span>
            </div>

            <!-- 填写并核对订单信息 -->
            <div class="checkout-tit">
                <span class="tit-txt">填写并核对订单信息</span>
                <div class="extra-l hide" id="verifiedHintTip" style="display: none;">
                    <div class="check-tips" id="verifiedHintContent">
                        由于@相关实名认证规定，收件人需在EZ WAY APP完成实名认证，以便订单包裹能顺利清关送达
                    </div>
                </div>
            </div>

            <!-- 收货地址信息盒子 -->
            <div class="checkout-steps">
                <!-- 收货人信息盒子 -->
                <div class="step-tit">
                    <h3>收货人信息</h3>
                    <!--<div class="tips-new-white hide" id="tariffTip">
                        <b></b>
                        <span>目的国/地区如产生关税及其它相关费用，需用户自行承担</span>
                    </div>-->

                    <!-- 右边的新增收货地址 -->
                    <div class="extra-r" id="layerDemo" style="margin-bottom: 0">
                        <div class="layui-btn-container" style="margin-top: 0px;">
                            <button data-method="setTop" class="layui-btn ftx-05 J_consignee_global">新增收货地址</button>
                        </div>
                        <!--<a href="" class="ftx-05 J_consignee_global">新增收货地址</a>-->
                        <!--<input type="text" class="zidingyi_xinzengshouhuodizhi" type="hidden" id="del_consignee_type" value="0">-->
                    </div>

                    <div style="margin-top: 15px">

                    </div>


                    <!--<div class="extra-r">
                        <a href="" class="ftx-05 J_consignee_global">新增收货地址</a>
                        <input type="text" class="zidingyi_xinzengshouhuodizhi" type="hidden" id="del_consignee_type" value="0">
                    </div>-->

                </div>

                <!-- 具体的收货地址详细信息的盒子 -->
                <div class="step-cont">
                    <div id="consignee-addr" class="consignee-content">
                        <div class="consignee-scrollbar">
                            <div class="ui-scrollbar-main">
                                <div class="consignee-scroll">
                                    <div class="consignee-cont" id="consignee1" style="height: 42px;">
<!--                                    <div class="consignee-cont" id="consignee1" style="height: 168px;">-->
                                        <ul id="consignee-list">

                                            <!-- 第一个地址信息 -->
                                            <li class="ui-switchable-panel ui-switchable-panel-selected" style="display: list-item;" id="consignee_index_3644935329" selected="selected" c_li_custom_label="consignee_li">
                                                <div class="consignee-item item-selected">
                                                    <span limit="6">哈哈哈 江苏</span>
                                                    <b></b>
                                                </div>

                                                <!-- 地址详细信息 -->
                                                <div class="addr-detail">
                                                    <span class="addr-name" limit="6" title="哈哈哈">哈哈哈</span>
                                                    <span class="addr-info" limit="45" title="哈哈 哈哈市 哈哈区 哈哈街道 哈哈哈哈区哈哈号楼">哈哈 哈哈市 哈哈区 哈哈街道 哈哈哈哈区哈哈号楼</span>
                                                    <span class="addr-tel">12345678912</span>
                                                </div>

                                                <!-- 详细地址右边的盒子 -->
                                                <div class="op-btns">
                                                    <a href="" class="ftx-05 setdefault-consignee">设为默认地址</a>
                                                    <a href="" class="ftx-05 edit-consignee">编辑</a>
                                                    <a href="" class="ftx-05 del-consignee hide">删除</a>
                                                </div>

                                            </li>

                                            <!-- 第二个地址信息 -->
                                            <li class="ui-switchable-panel ui-switchable-panel-selected" style="display: list-item;" id="consignee_index_3561203024">

                                                <!-- 左边的姓名盒子 -->
                                                <div class="consignee-item" id="consignee_index_div_3561203024">
                                                    <span>嘿嘿嘿 江苏</span>
                                                    <b></b>
                                                </div>

                                                <!-- 右边的地址信息 -->
                                                <div class="addr-detail">
                                                    <span class="addr-name" limit="6" title="嘿嘿嘿">嘿嘿嘿</span>
                                                    <span class="addr-info" limit="45" title="江苏 苏州市 吴中区 苏州工业园区直属镇 若水路1号苏州工业园区职业技术学院">江苏 苏州市 吴中区 苏州工业园区直属镇 若水路1号苏州工业园区职业技术学院</span>
                                                    <span class="addr-tel">12345569635</span>
                                                </div>

                                                <!-- 右边的隐藏盒子 -->
                                                <div class="op-btns">
                                                    <a href="" class="ftx-05 setdefault-consignee">设为默认地址</a>
                                                    <a href="" class="ftx-05 edit-consignee">编辑</a>
                                                    <a href="" class="ftx-05 del-consignee">删除</a>
                                                </div>

                                            </li>


                                            <!-- 第三个收货地址 默认的 -->
                                            <li class="ui-switchable-panel ui-switchable-panel-selected" style="display: list-item;" id="consignee_index_1840633061">

                                                <!-- 左边的收货人盒子 -->
                                                <div class="consignee-item" id="consignee_index_div_1840633061">
                                                    <span limit="6" title="哈哈哈">哈哈哈</span>
                                                    <b></b>
                                                </div>

                                                <!-- 右边的详细地址盒子 -->
                                                <div class="addr-detail">
                                                    <span class="addr-name" limit="6" title="哈哈哈">哈哈哈</span>
                                                    <span class="addr-info" limit="45" title="河南 哈哈 哈哈区 哈哈街道 哈哈哈路**号哈哈哈哈">河南 哈哈 哈哈区 哈哈街道 哈哈哈路**号哈哈哈哈</span>
                                                    <span class="addr-tel">16253014529</span>
                                                    <span class="addr-default">默认地址</span>
                                                </div>

                                                <!-- 最右边的隐藏盒子 -->
                                                <div class="op-btns">
                                                    <span></span>
                                                    <a href="" class="ftx-05 edit-consignee">编辑</a>
                                                    <a href="" class="ftx-05 del-consignee">删除</a>
                                                </div>

                                            </li>


                                            <!-- 第四个收货地址 -->
                                            <li class="ui-switchable-panel ui-switchable-panel-selected" style="display: list-item;" id="consignee_index_138717145">

                                                <!-- 左边收件人信息 -->
                                                <div class="consignee-item">
                                                    <span limit="6" title="哈哈哈">哈哈哈</span>
                                                    <b></b>
                                                </div>

                                                <!-- 详细信息盒子 -->
                                                <div class="addr-detail">
                                                    <span class="addr-name" limit="6" title="哈哈哈">哈哈哈</span>
                                                    <span class="addr-info" limit="45" title="河南 哈哈市 哈哈县 哈哈镇 哈哈村">河南 哈哈市 哈哈县 哈哈镇 哈哈村</span>
                                                    <span class="addr-tel">15968523641</span>
                                                </div>

                                                <!-- 最右边的隐藏盒子 -->
                                                <div class="op-btns" >
                                                    <a href="" class="ftx-05 setdefault-consignee">设为默认地址</a>
                                                    <a href="" class="ftx-05 edit-consignee">编辑</a>
                                                    <a href="" class="ftx-05 del-consignee">删除</a>
                                                </div>

                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 更多地址盒子 -->
                    <div class="addr-switch switch-on hide" style="display: block" id="consigneeItemAllClick">
                        <span>更多地址</span>
                        <b></b>
                    </div>

                    <!-- 收起地址盒子 -->
                    <div class="addr-switch switch-off" style="display: none" id="consigneeItemHideClick">
                        <span>收起地址</span>
                        <b></b>
                    </div>

                </div>

                <!-- 空白位置 -->
                <div class="hr"></div>

                <!-- 支付信息 + 商品信息盒子 -->
                <div id="shipAndSkuInfo">
                    <div id="payShipAndSkuInfo">

                        <!-- 支付方式字体盒子 -->
                        <div class="step-tit">
                            <h3>支付方式</h3>
                        </div>

                        <!-- 字符方式选择盒子 -->
                        <div class="step-cont">
                            <div class="payment-list">
                                <div class="list-cont">
                                    <ul class="list-cont">
                                        <input type="hidden" id="instalmentPlan" value="false">
                                        <li style="cursor: pointer;">
                                            <div class="payment-item item-selected online-payment">
                                                <b></b>
                                                <em class="payment-promo">惠</em>
                                                在线支付

                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 分割线 -->
                        <div class="hr"></div>

                        <!-- 送货清单 盒子 -->
                        <div class="step-tit">
                            <h3>送货清单</h3>
                            <div id="secondHint" class="tips-new-white hide"></div>
                        </div>

                        <!-- 商品信息盒子 -->
                        <div class="step-cont" id="skuPayAndShipment-cont">

                            <!-- 商品信息的二盒子 -->
                            <div class="shopping-lists" id="shopping-lists">

                                <!-- 定义大声品清单 list -->
                                <div class="hide" id="skuDetailInfo" notonemainsku="false">
                                <!--<div class="hide" id="skuDetailInfo" notonemainsku="false">-->

                                    <!-- 配送方式 和 商品信息 盒子 -->
                                    <div class="shopping-list ABTest wxw3">

                                        <!-- 商品信息盒子 -->
                                        <div class="goods-list">

                                            <!-- 商品信息的商家 -->
                                            <div class="goods-tit">
                                                <h4 class="vendor_name_h vendor_name_0" id="0" fitvendername="false" vendername="树懒商城">商家：树懒商城</h4>
                                            </div>

                                            <!-- 商品信息 隐藏的 -->
                                            <div class="goods-items"></div>

                                            <!-- 正式的商品信息 -->
                                            <div class="goods-items">
                                                <div class="goods-suit goods-last">
                                                    <!-- 商品上信息标题 -->
                                                    <div class="goods-suit-tit">
                                                        <span class="sales-icon">树懒</span>

                                                        <!-- 右边的信息 -->
                                                        <strong class="strong_zidingyiyangshi">树懒商城感谢您的信任</strong>

                                                    </div>
                                                    <div data-service></div>

                                                    <!-- 商品信息 -->
                                                    <div class="goods-item goods-item-extra">

                                                        <!-- 商品图片 -->
                                                        <div class="p-img">
                                                            <a href="" target="_blank">
                                                                <img src="../images/xaidanshangpintu.jpg" alt>
                                                            </a>
                                                        </div>

                                                        <!-- 商品的描述 -->
                                                        <div class="goods-msg">
                                                            <div class="goods-msg-gel">

                                                                <!-- 商品的名称描述 -->
                                                                <div class="p-name">
                                                                    <a href="" target="_blank">
                                                                        一加 OnePlus 9R 5G 120Hz 柔性屏8GB+256GB 青宇 骁龙870 65W快充  专业游戏配置 超大广角拍照手机
                                                                    </a>
                                                                </div>

                                                                <!-- 商品 价格 数量 信息 -->
                                                                <div class="p-price ">

                                                                    <!-- 左边的价格样式 -->
                                                                    <strong class="jd-price">
                                                                        <span>￥</span>
                                                                        <span>2999.00</span>
                                                                        <em class></em>
                                                                    </strong>

                                                                    <!-- 商品数量 -->
                                                                    <span class="p-num">
                                                                        1
                                                                    </span>

                                                                </div>

                                                            </div>
                                                        </div>


                                                        <!-- 商品属性 大盒子 -->
                                                        <div class="p-extra-continer">

                                                            <!-- 商品属性 小盒子 -->
                                                            <div class="p-extra-line">

                                                                <!-- 商品颜色 -->
                                                                <div class="fl">

                                                                    <strong>颜色：</strong>
                                                                    <span>青宇</span>

                                                                </div>

                                                                <!-- 商品型号 -->
                                                                <div class="fl">

                                                                    <strong>型号：</strong>
                                                                    <span>8GB+256GB</span>

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <!-- 隐藏的盒子 -->
                                                        <div class="clr"></div>
                                                        <div class="gift-item ftx-03"></div>


                                                    </div>

                                                </div>
                                            </div>

                                        </div>

                                        <!-- 商品左边的配送方式盒子 -->
                                        <div class="dis-modes" id="dis_modes_0">

                                            <div class="mode-item mode-tab">

                                                <!-- 配送方式 盒子 -->
                                                <div class="mode-item-tit">

                                                    <h4>配送方式</h4>

                                                </div>

                                                <!-- 快递盒子 -->
                                                <div class="mode-tab-nav">
                                                    <ul class="psfs-group">
                                                        <input type="hidden" id="containFactoryShip" value="0">

                                                        <li class="mode-tab-item jd curr" id="jd_shipment_item">
                                                            <span id="jdShip-span-tip" class="m-txt">
                                                                树懒商城自选快递
                                                                <i class="qmark-icon qmark-tip"></i>
                                                            </span>
                                                            <b></b>
                                                        </li>

                                                    </ul>
                                                </div>



                                                <!-- 收货地址盒子 -->
                                                <div class="mode-tab-con " id="jd_shipment">
                                                    <ul class="mode-list">
                                                        <li id="shipment_times">
                                                            <div class="fore1 hide" id="Honor_tip_0"></div>

                                                            <!-- 快递到达时间 -->
                                                            <div class="fore1" id="jd_shipment_calendar_date" data-text="    ">
                                                                <span class="mode-label ftx-03">标&nbsp;&nbsp;准&nbsp;&nbsp;达：</span>
                                                                <!-- 到达时间 -->
                                                                <!--<div class="mode-infor">
                                                                    预计&nbsp;四天后到达
                                                                    <span class="ftx-04">[下午]</span>
                                                                    &nbsp;09:00-15:00&nbsp;送达
                                                                </div>-->
                                                                <div class="mode-infor">预计 四天后[四天] 15:00-19:00 送达</div>
                                                            </div>

                                                            <!-- 选择控件 -->
                                                            <div class="hide" id="jd_shipment_calendar_v2_zy">

                                                            </div>

                                                            <!-- 修改按钮样式 -->
                                                            <div class="fore2" id="jdshipdate_eidt_id">
                                                                <a href="" class="ftx-05">修改</a>
                                                            </div>

                                                        </li>

                                                        <!-- 快递 小的提示 -->
                                                        <li class="delivery-info-li" id="delivery-info-li-zxj">
                                                            <span class="delivery-tips fr">
                                                                <!-- 新 -->
                                                                <i class="d-ico fl mr5"></i>

                                                                <!-- 显示的盒子样式中的 上面的小箭头 -->
                                                                <i class="d-arr"></i>

                                                                <!-- 懒准达 -->
                                                                <a href="#none" id="zxj_show_id" class="mr5">懒准达</a>
                                                                <a href="#none" id="311_show_id" class="mr5">标准达</a>
<!--                                                                <a href="#none" id="411_show_id" class="mr5 hide">极速达</a>-->
                                                                配送服务全面升级

                                                            </span>
                                                        </li>

                                                    </ul>
                                                </div>

                                            </div>

                                        </div>

                                        <!-- 间隔盒子 -->
                                        <div class="clr"></div>

                                        <!-- 总重量盒子 -->
                                        <div class="weight-cont total-freight-weight hide" style="display: block;">
                                            总重量：
                                            <em class="ftx-03 total-freight-weight-val">0.725kg</em>
                                        </div>

                                    </div>



                                </div>

                            </div>


                        </div>

                    </div>
                </div>

                <!-- 间隔线 -->
                <div class="hr"></div>

                <!-- 隐藏的盒子 -->
                <div class="clr"></div>

                <!-- 间隔线 -->
                <div class="hr"></div>


            </div>


            <!-- 订单包含商品数量、总商品金额、运费 -->
            <div class="order-summary">
                <!-- 小盒子样式 -->
                <div class="statistic fr mt20">
                    <div class="list">
                        <span>
                            <em class="ftx-01">1</em>
                             件商品，总商品金额：
                        </span>

                        <!-- 商品价格 -->
                        <em class="price" id="warePriceId">￥</em>
                        <em class="price" id="warePriceIdBiaoShi">2999.00</em>

                    </div>

                    <!-- 商品运费样式 -->
                    <div class="list">
                        <span>运费：</span>
                        <em class="price mianfei" id="freightPriceId">
                            <del color="#000000">￥99</del>
                        </em>
                    </div>

                </div>

                <!-- 隐藏盒子 -->
                <div class="clr"></div>

            </div>

            <div id="tooltip-box-common" class="hide"></div>

            <!-- 下面的商品的总价格、收货地址、收货人、提交订单盒子 -->
            <div class="trade-foot">

                <div id="plusInfoByFreight" class="hide"></div>
                <div id="plusInfo" class="hide"></div>

                <!--没有包含提交订单（按钮）盒子-->
                <div class="trade-foot-detail-com">
                    <!-- 总金额盒子 -->
                    <div class="fc-price-info">
                        <span class="price-tit">应付总额：</span>
                        <span class="price-num" id="sumPayPriceId">2999.00</span>
                        <span class="price-num" id="sumPayPriceIdBiaoshi">￥</span>
                    </div>

                    <!--包含收货地址、收货人信息-->
                    <div class="fc-consignee-info">
                        <span class="mr20">寄送至： 北京 朝阳区 八里庄街道   通惠家园惠民园2号楼底商哈哈镜（通惠店）</span>
                        <span id="sendMobile" class="shouhuorenziti">收货人：哈哈 166****5563</span>
                    </div>
                </div>

                <!-- 提交订单盒子 -->
                <div id="checkout-floatbar" class="group">
                    <div class="ui-ceilinglamp checkout-buttons">
                        <div class="sticky-placeholder hide" style="display: none;"></div>
                        <div class="sticky-wrap">
                            <div class="inner">
                                <button type="submit" class="checkout-submit" id="order-submit">
                                    提交订单
                                    <b></b>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- 返回顶部 盒子 -->
                <div id="backpanel">
                    <div id="backpanel-inner" class="hide switchOn" style="right: 224.5px;">
                        <div class="bp-item bp-item-survey">
                            <a href="" class="survey" target="_blank">树懒商城</a>
                        </div>

                        <!-- 返回顶部 -->
                        <div class="bp-item bp-item-backtop">
                            <a href="#none" class="backtop" target="_self">返回顶部</a>
                        </div>

                    </div>
                </div>


            </div>


        </div>


        <!--下方提示信息-->
        <div id="cmsfooter">
            <div id="service-2017">

                <!-- 多快好省 -->
                <div class="w hhzidingyi">
                    <ol class="slogen">
                        <li class="item fore1">
                            <i>多</i>
                            品类齐全，轻松购物
                        </li>
                        <li class="item fore2">
                            <i>多</i>
                            多仓发货，极速配送
                        </li>
                        <li class="item fore3">
                            <i>好</i>
                            正品行货，精致服务
                        </li>
                        <li class="item fore4">
                            <i>省</i>
                            天天低价，畅选无忧
                        </li>
                    </ol>
                </div>

                <!--下面的信息-->
                <div class="shulan-help">
                    <div class="w hhzidingyi">
                        <div class="tishixinxi">
                            <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>

    <script src="../js/place_an_order.js"></script>

    <script src="../res/layui/layui.js" charset="utf-8"></script>

    <script>
        layui.use('layer', function(){ //独立版的layer无需执行这一句
            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

            //触发事件
            var active = {
                setTop: function(){
                    var that = this;
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '新增收货人信息'
                        ,area: ['690px', '517px']
                        ,shade: 0
                        ,maxmin: true
                        ,offset: 'auto'
                        ,content: ''

                        ,btn: ['保存收货人信息'] //只是为了演示
                        /*,yes: function(){
                            $(that).click();
                        }*/

                    });
                }

            };

            $('#layerDemo .layui-btn').on('click', function(){
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

        });
    </script>

    </body>
</html>